<template>
  <div>
    <validator name="validUserNameForm">
      <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
        <div class="form-group">
          <label>请输入您需要找回的账号:</label>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" v-model="account.username" initial="off" detect-change="off"  placeholder="请输入手机号/邮箱" v-validate:username="['required', 'username']" />
          <div>
            <error-template v-show="$validUserNameForm.username.required">{{$validUserNameForm.username.required}}</error-template>
            <error-template v-show="$validUserNameForm.username.username&&!$validUserNameForm.username.required">{{$validUserNameForm.username.username}}</error-template>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" v-model="account.imgCode" initial="off" detect-change="off"  placeholder="请输入验证码" v-validate:imgcode="['required']"/>
            <span class="input-group-btn">
              <img-check-code></img-check-code>
            </span>
          </div>
          <div>
            <error-template v-show="$validUserNameForm.imgcode.required">{{$validUserNameForm.imgcode.required}}</error-template>
          </div>
        </div>
        <div class="form-group">
            <button type="button" v-on:click.prevent="validUserName" class="form-control btn btn-success">下一步</button>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
import ImgCheckCode from '../ImgCheckCode.vue'
import { checkImgCode } from 'src/api/check'
import { getUserInfoforget } from 'src/api/user'
export default {
  props: {
    account: {
      required: true,
      type: Object
    }
  },
  methods: {
    validUserName() {
      var self = this
      this.$validate(() => {
        if (self.$validUserNameForm.invalid) {
          return
        }
        var account = self.account
        checkImgCode(account.imgCode)
        .then(data => {
          return getUserInfoforget(account.username)
        }).then((data) => {
          self.$dispatch('setAccount', data)
          if (data.mobile) {
            self.$dispatch('setMethod', 'mobile')
          } else {
            self.$dispatch('setMethod', 'email')
          }
          self.$dispatch('setStep', 2)
        }).catch(message => self.$notify.error(message))
      })
    }
  },
  components: {
    ImgCheckCode
  }
}
</script>